<template>
  <view class="technology">
    <view
      class="technology-item flex align-center"
      v-for="(item, i) in list"
      @click="$u.route({
        url:'/pages-details/hall/index',
        params: {
          id: item.id
        }
      })"
      :key="i"
    >
      <image class="technology-item__img" :src="getImgUrl(item.image)" style="border-radius: 12rpx" mode="aspectFill">
      </image>
      <view class="technology-item__content">
        <view class="c333 fw500 font32 h1"> {{ item.title }} </view>
        <view class="mgt20 font24 c666 flex">
         <view class="text-ell">{{ item.desc }}</view> 
        </view>
        <view class="to-detail  flex align-center">
          <view class="c481 font24">查看详情</view>
          <view style="padding-left: 4rpx;">
            <u-icon name="arrow-right" size="26rpx" color="#481EC1"></u-icon>
          </view>
        </view>
      </view>

      <view
        class="technology-item__line"
        :style="{
          'background-image': `url(${bgline})`,
        }"
      ></view>
    </view>
  </view>
</template>

<script>
import Data from "../helper/index";
export default {
  props: {
    isNext: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      bgline: require("@/static/hall-line.png"),
      list: [],
    };
  },

  mounted() {
    if (this.isNext) {
      this.list = this.$u.deepClone(Data).reverse();
    } else {
      this.list = this.$u.deepClone(Data);
    }
  },
};
</script>

<style lang="scss" scoped>
.technology {
  &-item {
    position: relative;

    &__line {
      position: absolute;
      bottom: -40rpx;
      left: 50%;
      width: 366rpx;
      height: 156rpx;
      transform: translate(-50%, 50%) rotate(0);
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    &__img {
      width: 312rpx;
      height: 180rpx;
      flex-shrink: 0;
    }

    &__content {
      margin-left: 20rpx;
      flex: 1;
      width: 0;
      .h1 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        
      }
    }
    &:not(:first-child) {
      margin-top: 80rpx;
    }
    &:nth-child(2n) {
      flex-direction: row-reverse;
      .technology-item__content {
        margin-right: 20rpx;
        margin-left: 0;
      }

      .technology-item__line {
        transform: translate(-50%, 50%) scaleX(-1);
      }
    }
    &:last-child {
      .technology-item__line {
        display: none;
      }
    }
  }
}

.to-detail {
  margin-top: 24rpx;
}
</style>
